<template>
  <view
    class="content ba_img"
    :style="{
      //   'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#eeeeee"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">生生书院</view>
    </view>
    <view class="tabs_box" :style="{ 'margin-top': tabTop + 'px' }">
      <u-tabs
        class="tabs"
        :list="list1"
        @click="tabClick"
        :activeStyle="{
          color: '#eee',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          'font-size': '32rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }"
        lineColor="#eee"
        :inactiveStyle="{
          color: '#ADADAD',
          transform: 'scale(1)',
          'font-size': '32rpx',
          paddingLeft: '12rpx',
          paddingRight: '12rpx',
        }"
      ></u-tabs>
    </view>
    <view class="whole_img" v-if="currentIndex == 0">
      <!-- 轮播区域 -->
      <u-swiper
        style="margin-top: 35rpx; border-radius: 16rpx"
        height="270rpx"
        :list="list5"
        @change="(e) => (current = e.current)"
        @click="clickSwiper"
        :autoplay="true"
        keyName="file_url"
      >
        <view slot="indicator" class="indicator">
          <view
            class="indicator__dot"
            v-for="(item, index) in list5"
            :key="index"
            :class="[index === current && 'indicator__dot--active']"
          >
          </view>
        </view>
      </u-swiper>
    </view>
    <scroll-view
      :style="{
        height: scrollHeihgt + 'px',
        'padding-top': '20rpx',
        'box-sizing': 'border-box',
      }"
      :scroll-y="true"
      @scroll="scroll"
    >
      <whole v-if="currentIndex == 0" :list="list"></whole>
      <mentor-item
        v-if="currentIndex == 1"
        :list="{ data: list }"
      ></mentor-item>
      <introduce v-if="currentIndex == 2" :list="{ data: list }"></introduce>
      <introduce v-if="currentIndex == 3" :list="{ data: list }"></introduce>
      <introduce v-if="currentIndex == 4" :list="{ data: list }"></introduce>
      <starList
        :isWhite="true"
        v-if="currentIndex == 5"
        :list="{ data: list }"
      ></starList>
      <view :style="{ height: '100rpx' }"></view>
    </scroll-view>
	 <floatingBall></floatingBall>
  </view>
</template>

<script>
import whole from "./whole.vue"; // 全部
import mentorItem from "@/components/mentor_item.vue"; //导师介绍
import introduce from "@/components/introduce";
import starList from "@/components/starList.vue"; //慈善活动
import { getList, carousel } from "@/common/api/shuyuan.js";
import { xingheList } from "@/common/api/start.js";
export default {
  components: {
    whole,
    mentorItem,
    introduce,
    starList,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      tabTop: 0,
      list1: [
        {
          name: "全部",
        },
        {
          name: "导师介绍",
        },
        {
          name: "书院宗旨",
        },
        {
          name: "新闻动态",
        },
        {
          name: "招聘启示",
        },
        {
          name: "慈善活动",
        },
      ],
      currentIndex: 0,
      scrollHeihgt: 0,
      list: [],
      list5: [],
      current: 0,
    };
  },
  created() {
    this.getHeight();
  },
  onLoad() {
    this.getList();
    this.carouselList();
  },
  methods: {
    getHeight() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      const windowHeihgt = statusBarHeight.windowHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
            // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
          })
          .exec();
      });

      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".head").fields({
          size: true,
        });
        query.select(".tabs_box").fields({
          size: true,
        });
        query.select(".whole_img").fields({
          size: true,
        });

        query.exec((data) => {
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.scrollHeihgt = windowHeihgt - sum - this.statusBarHeight;
          this.tabTop = data[0].height;
          console.log(data[0].height, "头部高度");
          console.log(data[1].height, "tab高度");
          console.log(data[2].height, "轮播高度");
          console.log(this.scrollHeihgt, "滚动区高度");
        });
      });
    },
    clickSwiper(e){
      // console.log(this.list5[e])
      plus.runtime.openURL(this.list5[e].url, function() {
        console.log('Open URL success:', this.data.carousel_img[index].url);
      }, function(error) {
        console.error('Open URL failed:', error);
      });
    },
    carouselList() {
      carousel().then((res) => {
        console.log("resssss", res);
        this.list5 = res.data.list;
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    tabClick(e) {
      this.currentIndex = e.index;
      if (this.currentIndex + 1 == 6) {
        this.cishanList();
      } else {
        this.getList();
      }
      this.getHeight();
    },
    cishanList() {
      xingheList({
        type: 7,
      })
        .then((res) => {
          this.list = res.data.list.data;
        })
        .catch((err) => {});
    },
    getList() {
      getList({
        type: this.currentIndex + 1,
      }).then((res) => {
        console.log("resssss", res);
        this.list = res.data.list.data;
      });
    },
    scroll(e) {},
  },
};
</script>

<style scoped lang="scss">
.ba_img {
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  box-sizing: border-box;
  position: fixed;
}

.head {
  width: 100%;
  padding: 18rpx 0 47rpx;
  position: fixed;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}

.box {
  width: 100%;
}
.whole_img {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
</style>